<template>
  <canvas class="onekit-canvas"
          :class="onekitClass"
          :style="onekitStyle"
          :id="_id"
          @touchstart="canvas_touchstart"
          @touchmove="canvas_touchmove"
          @touchend="canvas_touchend"
          @touchcancel="canvas_touchcancel"
          @error="canvas_error">
  </canvas>
</template>

<script>
//import CanvasImage from "../../api/CanvasImage"
import weixin_behavior from "../../behaviors/weixin_behavior"
import onekit_behavior from "../../behaviors/onekit_behavior"
let loop;
export default {
  name: "onekit-canvas",
  mixins: [weixin_behavior, onekit_behavior],
  computed: {
    _id () {
      return this.id_()
    }
  },
  props: {
    type: {
      type: String,
      default: ""
    },
    "canvas-id": {
      type: String,
      default: ""
    },
    "disable-scroll": {
      type: [Boolean, String],
      default: false
    },
  },
  watch: {
    width (width) {
      console.log(width)
    }
  },
  mounted () {
    const canvas = document.getElementById(this.id_())
    //第三代
    canvas.cancelAnimationFrame = () => {
      window.cancelAnimationFrame()
    }
    canvas.createImage = () => {
      return new Image();
    }
    canvas.createImageData = () => {
      return new ImageData();
    }
    canvas.createPath2D = (path) => {
      new Path2D.addPath(path)
      return new Path2D();
    }
    canvas.requestAnimationFrame = (callback) => {
      window.requestAnimationFrame(callback)
    }
  },
  methods: {
    id_ () {
      return this.canvasId ? this.canvasId : this.onekitId
    },
    //////////////////////////////////////////
    canvas_touchstart () {
      this.$emit('Touchstart')
      /////////
      clearTimeout(loop)
      loop = setTimeout(() => {
        this.$emit('Longtap')
      }, 500);
    },
    canvas_touchmove () {
      this.$emit('Touchmove')
    },
    canvas_touchend () {
      this.$emit('Touchend')
      clearTimeout(loop);
    },
    canvas_touchcancel () {
      this.$emit('Touchcancel')
    },
    canvas_error () {
      this.$emit('Error')
    },
  }
}
</script>

<style>
</style>
